<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-row :gutter="20">
        <el-col :span="12" style="padding-top: 5px;padding-bottom: 5px;">
          <div style="background: #fff;padding: 5px">
            <span style="font-size: 19px;color: #C03639">全部信息</span>
            <el-row :gutter="12" style="margin-top: 10px">
              <el-col :span="6">
                <el-card shadow="always">
                  订单总量：{{ totalStatics.totalOrderCount }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  订单总额：{{ totalStatics.totalOrderFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  支付金额：{{ totalStatics.totalOrderPayFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  免单金额：{{ totalStatics.totalOrderFreeFee }}
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin-top: 10px">
              <el-col :span="6">
                <el-card shadow="always">
                  投放总数：{{ totalStatics.totalDeviceTfCount }}
                </el-card>
              </el-col>
            </el-row>
            <div style="width: 100%;height: 20px;background-color: rgb(240, 242, 245)" />
            <div style="margin-top: 20px;margin-bottom: 10px">
              <span style="font-size: 19px;color: #C03639">当天信息</span>
            </div>
            <el-row :gutter="12" style="margin-top: 10px">
              <el-col :span="6">
                <el-card shadow="always">
                  订单量：{{ todayStatics.todayOrderCount }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  订单金额：{{ todayStatics.todayOrderFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  支付金额：{{ todayStatics.todayOrderPayFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  免单金额：{{ todayStatics.todayOrderFreeFee }}
                </el-card>
              </el-col>
            </el-row>

            <div style="width: 100%;height: 20px;background-color: rgb(240, 242, 245)" />

            <div style="margin-top: 20px;margin-bottom: 10px">
              <span style="color: #C03639;font-size: 15px;">楼宇信息</span>
            </div>
            <el-table ref="totalHospital" :data="floorTotal" style="width: 100%;" border>
              <el-table-column prop="showName" label="楼宇名称" :show-overflow-tooltip="true" />
              <el-table-column prop="orderCount" label="订单量" :show-overflow-tooltip="true" />
              <el-table-column prop="orderFee" label="订单总额" :show-overflow-tooltip="true" />
              <el-table-column prop="payFee" label="已支付金额" :show-overflow-tooltip="true" />
              <el-table-column prop="deviceCount" label="设备数量" :show-overflow-tooltip="true" />
              <el-table-column label="操作" width="130px" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="showFloorOrderLine(scope.row.showId)">
                    订单走势
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div style="margin-top: 20px;margin-bottom: 10px">
              <span style="color: #C03639;font-size: 15px;">科室信息</span>
            </div>
            <el-table ref="todayHospital" :data="departTotal" style="width: 100%;" border>
              <el-table-column prop="showName" label="科室名称" :show-overflow-tooltip="true" />
              <el-table-column prop="orderCount" label="订单量" :show-overflow-tooltip="true" />
              <el-table-column prop="orderFee" label="订单总额" :show-overflow-tooltip="true" />
              <el-table-column prop="payFee" label="已支付金额" :show-overflow-tooltip="true" />
              <el-table-column prop="deviceCount" label="设备数量" :show-overflow-tooltip="true" />
              <el-table-column label="操作" width="130px" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="showDepartOrderLine(scope.row.showId)">
                    订单走势
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="12" style="padding-top: 5px;padding-bottom: 5px">
          <div style="background: #fff;padding: 5px">
            <div style="margin-top: 20px;margin-bottom: 10px">
              <span style="color: #C03639;font-size: 15px;">订单走势</span>
            </div>
            <div id="orderLineChart" style="width: 90%;height: 30vh;" />
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog append-to-body :visible.sync="itemDialog" title="订单走势" width="700px">
      <div id="itemOrderLineChart" style="width: 90%;height: 30vh;" />
    </el-dialog>
  </div>
</template>

<script>
import { getHospitalItemTotal, getHospitalItemToday, getHospitalFloor, getHospitalDepart, getHospitalOrderLine, getFloorOrderLine, getDepartOrderLine } from '@/api/business/statics/statics'
import echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      hospitalId: null,
      totalStatics: {},
      todayStatics: {},
      floorTotal: [],
      departTotal: [],
      itemDialog: false,
      itemOrderLineChart: null
    }
  },
  created() {
    this.hospitalId = this.$route.params.hospitalId
    this.getTotalStatics()
    this.getTodayTotalStatics()
    this.getFloorStatics()
    this.getDepartStatics()
  },
  mounted() {
    this.getTotalOrderLineStatics()
    // this.initItemOrderLineChart()
  },
  methods: {
    getTotalStatics() {
      getHospitalItemTotal(this.hospitalId).then((data) => {
        this.totalStatics = data
      })
    },
    getFloorStatics() {
      getHospitalFloor(this.hospitalId).then((data) => {
        this.floorTotal = data
      })
    },
    getDepartStatics() {
      getHospitalDepart(this.hospitalId).then((data) => {
        this.departTotal = data
      })
    },
    getTotalOrderLineStatics() {
      getHospitalOrderLine(this.hospitalId).then((data) => {
        this.initOrderLineChart(data)
      })
    },
    getTodayTotalStatics() {
      getHospitalItemToday(this.hospitalId).then((data) => {
        this.todayStatics = data
      })
    },
    showFloorOrderLine(floorId) {
      this.itemDialog = true
      getFloorOrderLine(floorId).then((data) => {
        if (this.itemOrderLineChart) {
          this.itemOrderLineChart.setOption(this.getItemOrderLineOption(data))
        } else {
          this.initItemOrderLineChart(data)
        }
      })
    },
    showDepartOrderLine(departId) {
      this.itemDialog = true
      getDepartOrderLine(departId).then((data) => {
        if (this.itemOrderLineChart) {
          this.itemOrderLineChart.setOption(this.getItemOrderLineOption(data))
        } else {
          this.initItemOrderLineChart(data)
        }
      })
    },
    initOrderLineChart(data) {
      const dateArray = []
      const orderCountArray = []
      const orderFeeArray = []
      const orderPayArray = []
      data.forEach((item, i) => {
        dateArray.push(item.dateShow)
        orderCountArray.push(item.orderCount)
        orderFeeArray.push(item.orderFee)
        orderPayArray.push(item.payFee)
      })

      const orderLineChart = echarts.init(document.getElementById('orderLineChart'))
      // 使用刚指定的配置项和数据显示图表。
      orderLineChart.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['订单金额', '支付金额', '订单量'] },
        color: ['#8AE09F', '#330066', '#ff0000'],
        xAxis: { // 设置x轴
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: dateArray,
          name: '日期', // X轴 name
          nameTextStyle: { color: '#1C1C1C', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }}
        },
        yAxis: [{
          name: '订单量',
          nameTextStyle: { color: '#FA6F53', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }},
          type: 'value'
        },
        {
          name: '金额/元',
          nameTextStyle: { color: '#1C1C1C', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }},
          type: 'value'
        }
        ],
        series: [
          {
            name: '订单金额',
            yAxisIndex: 1,
            data: orderFeeArray,
            type: 'line', // 类型为折线图
            lineStyle: { normal: { color: '#8AE09F' }}
          },
          {
            name: '支付金额',
            yAxisIndex: 1,
            data: orderPayArray,
            type: 'line',
            lineStyle: { normal: { color: '#330066' }}
          },
          {
            name: '订单量',
            data: orderCountArray,
            type: 'line',
            lineStyle: { normal: { color: '#ff0000' }}
          }
        ]
      })
    },
    getItemOrderLineOption(data) {
      const dateArray = []
      const orderCountArray = []
      const orderFeeArray = []
      const orderPayArray = []
      if (data) {
        data.forEach((item, i) => {
          dateArray.push(item.dateShow)
          orderCountArray.push(item.orderCount)
          orderFeeArray.push(item.orderFee)
          orderPayArray.push(item.payFee)
        })
      }
      return {
        tooltip: { trigger: 'axis' },
        legend: { data: ['订单金额', '支付金额', '订单量'] },
        color: ['#8AE09F', '#330066', '#ff0000'],
        xAxis: { // 设置x轴
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: dateArray,
          name: '日期', // X轴 name
          nameTextStyle: { color: '#1C1C1C', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }}
        },
        yAxis: [{
          name: '订单量',
          nameTextStyle: { color: '#FA6F53', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }},
          type: 'value'
        },
        {
          name: '金额/元',
          nameTextStyle: { color: '#1C1C1C', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }},
          type: 'value'
        }
        ],
        series: [
          {
            name: '订单金额',
            yAxisIndex: 1,
            data: orderFeeArray,
            type: 'line', // 类型为折线图
            lineStyle: { normal: { color: '#8AE09F' }}
          },
          {
            name: '支付金额',
            yAxisIndex: 1,
            data: orderPayArray,
            type: 'line',
            lineStyle: { normal: { color: '#330066' }}
          },
          {
            name: '订单量',
            data: orderCountArray,
            type: 'line',
            lineStyle: { normal: { color: '#ff0000' }}
          }
        ]
      }
    },
    initItemOrderLineChart(data) {
      this.itemOrderLineChart = echarts.init(document.getElementById('itemOrderLineChart'))
      // 使用刚指定的配置项和数据显示图表。
      this.itemOrderLineChart.setOption(this.getItemOrderLineOption(data))
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    height: 100%;
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
</style>
